import React from 'react';
import { FooterCourse, HeaderNav, MediaPlayer, YuyueModal } from 'components';
import LongBanner from './components/longBanner'
import LongDesc from './components/longDesc'
import LongCourse from './components/longCourse'
import LongLevel from './components/longLevel'
import LongSystem from './components/longSystem'
import _LongTeamExpert from './components/_longTeamExpert'
import OriginalSound from './components/originalSound'
import http from 'libs/http'
import './index.less'
import Helmet from 'react-helmet';
import { _alert } from 'libs/utils'
import { withContext } from 'libs/context'

const mapStateToProps = ({state_authority}) => {
  return {authority: state_authority}
}

class Long_english extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      engList: [],
      showYuyueModal: false,
      courseData: {},
      videoUrl: '',
      showVideo: false,
      videoTitle: '',
      authority: '',
    }
  }

  componentDidMount() {
    this.checkRoleType()
    this.getAuditionsCourseList()
  }

  checkRoleType = () => {
    http.get('/role/getRole').then(res => {
      res.data && this.setState({
        authority: res.data
      })
    })
  }

  getAuditionsCourseList() {
    http.get('/student/business/getAuditionsCourseListH5').then(res => {
      res.data.map(item => {
        if(item.title === '英语') {
          this.setState({ engList: item.courses })
        }
      })
    })
  }

  handleSubscribe = (course) => () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      // _alert('用户未登录，点击确定跳转登录页面').close(()=>{
      //   history.push('/stu/passwordLogin')
      // })
      history.push('/stu/passwordLogin')
    }else {
      this.setState({
        showYuyueModal: true,
        courseData: course
      })
    }
  }

  handleClick = () => {
    const { authority } = this.state
    const { history } = this.props
    if(authority !== 'STUDENT') {
      // _alert('用户未登录，点击确定跳转登录页面').close(()=>{
      //   history.push('/stu/passwordLogin')
      // })
      history.push('/stu/passwordLogin')
    }else {
      history.push('/student/wodeyuyue')
    }
  }

  getVideoUrl = (code, title='英语原声绘本') => {
    http.get('/student/common/getPublicByCode?code='+code).then(res => {
      const videoUrl = res.data.TV_URL;
      this.setState({ videoUrl, showVideo: true, videoTitle: title });
    })
  }

  render() {
    const { engList, showYuyueModal, courseData, videoUrl, videoTitle, showVideo } = this.state
    return (
      <div className="long-english-container-pad">
        <Helmet title="龙英语" />
        <HeaderNav history={this.props.history} />

        <LongBanner handleClick={this.handleClick} />
        <LongDesc />
        <LongCourse />
        <LongLevel />
        <div className="long-free-course-pad">
          <h2>免费试听课</h2>
          <div>
            {engList.map(eng => (
              <div className="free-course-item" key={eng.id}>
                <img src={eng.courseFile} />
                <p>{eng.name}</p>
                <i>{eng.courseDesc}</i>
                <span className="subscribe-btn" onClick={this.handleSubscribe(eng)}>立即预约</span>
            </div>
            ))}
          </div>
        </div>
        <LongSystem />
        <OriginalSound getVideoUrl={this.getVideoUrl} />
        <_LongTeamExpert />

        <YuyueModal
          visible={showYuyueModal}
          courseData={courseData}
          closeYuyueModal={()=>{this.setState({showYuyueModal: false})}}
        />

        <FooterCourse />

        <MediaPlayer
          src={videoUrl}
          show={showVideo}
          title={videoTitle}
          onCancel={()=>{this.setState({ showVideo: false, videoUrl: '', videoTitle })}}
        />
      </div>
    )
  }
}

export default  withContext('authority')(Long_english)
